import React, {useEffect, useRef} from 'react'
import IndexTable from "../../../../../../shared-components/Tables/IndexTable/IndexTable";
import NoDataPage from "../../../../../game/Football/NoDataPage/NoDataPage";

export const formatAsiaOdd = (odd) => {
    if (!odd && odd !== 0) return ''
    let symbol = ''

    if (odd === 0) return '0'
    if (odd > 0) symbol = '主让'
    if (odd < 0) symbol = '客让'
    let rate = odd / 0.25
    if (rate % 2 === 0) {
        return `${symbol} ${Math.abs(odd)}`
    }

    let down = Math.abs(odd - 0.25)
    let up = Math.abs(odd + 0.25)
    return down > up
        ? `${symbol} ${up}/${down}`
        : `${symbol} ${down}/${up}`
}

export const formatTableAsiaOdd = (odd) => {
    let symbol = ''
    if (odd < 0) symbol = '-'
    let rate = odd / 0.25
    if (rate % 2 === 0) {
        return `${symbol} ${Math.abs(odd)}`
    }

    let down = Math.abs(odd - 0.25)
    let up = Math.abs(odd + 0.25)
    return down > up
        ? `${symbol}${up}/${down}`
        : `${symbol}${down}/${up}`
}

export const formatAsiaOddToCh = (odd) => {
    let prefix = ''
    let rate = odd / 0.25

    if (odd === 0) return '平手'
    if (odd > 0) prefix = '主让'
    if (odd < 0) prefix = '客让'

    let mapper = {
        '0.5': '半球',
        '1': '一球',
        '1.5': '球半',
        '2': '两球',
        '2.5': '两球半',
        '3': '三球',
        '3.5': '三球半',
        '4': '四球',
        '4.5': '四球半',
        '5': '五球',
        '5.5': '五球半',
        '6': '六球',
        '6.5': '六球半',
        '7': '七球',
        '7.5': '七球半',
        '8': '八球',
        '8.5': '八球半',
        '9': '九球',
        '9.5': '九球半',
    }

    if (rate % 2 === 0) {
        let abs = String(Math.abs(odd))
        if (mapper[abs]) return `${prefix} ${mapper[abs]}`
        return ''
    } else {
        let down = Math.abs(odd - 0.25)
        let up = Math.abs(odd + 0.25)
        let downStr = mapper[down]
        let upStr = mapper[up]
        return down > up
            ? `${prefix} ${upStr}/${downStr}`
            : `${prefix} ${downStr}/${upStr}`
    }
}

const AsiaOddsTable = props => {
    const ctnContent = useRef(null)
    const {
        data,
    } = props

    useEffect(() => {

        if (data.length > 0) {
            props.setContentCtn(ctnContent.current, props.bindScrollEvent)
        }

    }, [data,])


    // 格式化盘口数据
    data.forEach(arr => {
        const firstOdd = arr[2]
        const nowOdd = arr[5]
        arr[2] = {
            from: firstOdd,
            to: formatTableAsiaOdd(firstOdd),
            ch: formatAsiaOddToCh(firstOdd)
        }
        arr[5] = {
            from: nowOdd,
            to: formatTableAsiaOdd(nowOdd),
            ch: formatAsiaOddToCh(nowOdd)
        }
        return arr
    })

    if (data.length === 0) {
        return <NoDataPage/>
    }

    const tHead = [
        {title: '公司', dataIndex: 'company',},
        {title: '主', dataIndex: 'hostFirst',},
        {title: '初盘', dataIndex: 'tiedFirst',},
        {title: '客', dataIndex: 'awayFirst',},
        {title: '主', dataIndex: 'hostLatest',},
        {title: '即盘', dataIndex: 'tiedLatest',},
        {title: '客', dataIndex: 'awayLatest',},
    ]
    return <div ref={ctnContent}>
        <IndexTable tHead={tHead} data={data}/>
    </div>
}

export default AsiaOddsTable
